<template>
	<view>
		<image class="register-sex-white" :src="$c.config.media+'mini/register/shengri.png'" mode=""></image>
		<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view" mask-style="background:transparent;">
			<picker-view-column>
				<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
			</picker-view-column>
		</picker-view>
		<view class="register-btn1"  @tap="$parent.current = 3" :style="'background-image: url('+$c.config.media+'mini/common/jiesuo.png);'">
			继续
		</view>
	</view>
</template>

<script>
    export default {
		props:{
			parent: { type: Object },
			data:{type:Object,default:{}}
		},
        data () {
            const date = new Date()
            const years = []
            const year = date.getFullYear()
            const months = []
            const month = date.getMonth() + 1
            const days = []
            const day = date.getDate()
            for (let i = 1900; i <= date.getFullYear()-18; i++) {
                years.push(i)
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i)
            }
            for (let i = 1; i <= 31; i++) {
                days.push(i)
            }
            return {
				$c: this.$c,
                title: 'picker-view',
                years,
                year,
                months,
                month,
                days,
                day,
                value: [years.length-1, month - 1, day - 1],
                indicatorStyle: `height: 50px;`
            }
        },
		created() {
			// #ifndef MP
			this.$parent = this.parent;
			// #endif
			
			this.$nextTick(()=>{
				let e={detail:{value:this.value}}
				this.bindChange(e)
			})
		},
        methods: {
            bindChange: function (e) {
                const val = e.detail.value
                this.$parent.dataObj.birthday = this.years[val[0]]+'-'+this.months[val[1]]+'-'+this.days[val[2]]
            }
        }
    }
</script>

<style lang="scss">
	.register-sex-white{
		width: 316rpx;
		height: 54rpx;
		display: block;
		margin: 80rpx auto 120rpx;
	}
	.input-section{
		border-radius: 24rpx;
		width: 694rpx;
		margin: 0 auto;
		background: #221F30;
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
		padding: 0 20rpx;
		box-sizing: border-box;
		padding-bottom: 32rpx;
		position: relative;
		margin-bottom: 56rpx;
		.input-title{
			padding: 32rpx 0;
		}
		.input-content{
			padding: 20rpx 20rpx;
			background: #363646;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #7D7D96;
			line-height: 44rpx;
		}
	}
	
	.register-btn1{
		width: 694rpx;
		height: 100rpx;
		display: block;
		margin: 0 auto;
		background-size: 100% 100%;
		text-align: center;
		line-height: 100rpx;
		color: #FFFFFF;
		margin-top: 80rpx;
	}
	
	.picker-view {
			width: 750rpx;
			height: 600rpx;
			margin-top: 20rpx;
		}
		.item {
			height: 50px;
			align-items: center;
			justify-content: center;
			text-align: center;
			color: #999999;
		}
		.picker-view /deep/.uni-picker-view-mask,.picker-view .uni-picker-view-mask{
			background: transparent;
		}
</style>

